<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.body {
  width: 90%;
  padding-left: 3%;
}
.gongg {
  .el-card__body {
    padding: 12px 20px !important;
    overflow: hidden;
    .pull-left {
      cursor: pointer;
      margin-right: 30px;
    }
    .pull-right {
      cursor: pointer;
    }
    i {
      margin-right: 10px;
      color: #999;
    }
    .el-tag--mini {
      line-height: 14px;
      height: 16px;
      margin-left: 4px;
      margin-right: 6px;
    }
  }
  .news:hover {
    color: #f56c6c;
    background: url()
  }
}
.banerbg{
  width: 200px;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  background-size:100% 100% !important; 
  margin: auto;
}
</style>
<template>
  <div class="body">
    <h1 style="font-size:25px;">banner管理</h1>
      <el-card class="gongg" shadow="never">
        <div class="us el-card__body">
              <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="banner">
                  <template slot-scope="scope">
                    <div class="banerbg" :style="'background: url('+scope.row.img+')'"></div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="图文名称"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="index"
                  label="位置"
                  align="center">
                </el-table-column>
                <el-table-column
                  align="center"
                  label="控制">
                   <template slot-scope="scope">
                     <el-button  @click="changebanner(scope.row.index)" type="primary">
                       修改
                     </el-button>
                  </template>
                </el-table-column>
              </el-table>
        </div>
      </el-card>
      <el-dialog
          title="设置banner"
          :visible.sync="dgshow"
          width="30%">
         <div>
           <el-form label-position="left"  label-width="100px">
              <el-form-item label="选择关联图文">
                  <el-collapse style="width:23rem;border:1px #e5e5e5 solid;border-radius: 5px;padding-left:10px;padding-right:10px;">
                    <el-collapse-item :title="'关联图文：'+form.name" name="1">
                      <div>
                        <el-input size="small" @keyup.enter.native="getData" placeholder="请输入图文名称搜索" v-model="title">
                          <el-button slot="append" @click="getData">搜索</el-button>
                        </el-input>
                      </div>
                      <div style="border:1px #e5e5e5 solid;border-radius: 5px;">
                        <p v-if="accountData.length<=0" style="color:#999;text-align:center;">暂无相关图文....</p>
                        <table style="width:100%;">
                          <tr v-for="(item,index) in accountData" :key="index">
                            <td align="center">
                              <img :src="item.banner || ''" style="width:100px;height:50px;border-radius: 5px;"/>
                            </td>
                            <td align="center">
                              {{item.title}}
                            </td>
                            <td align="center">
                              <el-button @click="selectShop(item)" type="text">选择</el-button>
                            </td>
                          </tr>
                        </table>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
              </el-form-item>
           </el-form>
         </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dgshow = false">取 消</el-button>
            <el-button type="primary" @click="handlechange">确 定</el-button>
          </span>
        </el-dialog>
  </div>
</template>

<script>
export default {
  name: "banner",
  data() {
    return {
      tableData: [],
      dgshow:false,
      form:{
        name:'暂无关联',
        artid:'',
        index:0,
        img:''
      },
      accountData:[],
      title:''
    };
  },
  mounted() {
    this.getbanner();
    this.getData();
  },
  methods: {
    async handlechange(){
      let list = this.tableData.map(t=>{
        return t.index==this.form.index?this.form:t;
      })
      let res = await this.$http.post('/other/updateone',{name:'banner',array:list});
      this.getmessage(res.data.data,'修改');
      this.getbanner();
        this.form = {
        name:'暂无关联',
        artid:'',
        index:0,
        img:''
      }
      this.dgshow = false;
    },
    selectShop(item){
      this.form.artid = item._id;
      this.form.img = item.banner;
      this.form.name = item.title;
    },
    changebanner(index){
      this.form.index = index;
      this.dgshow = true;
    },
    async getbanner(){
      try {
        let shoptoplvid = this.$store.state.admin._id;
        let res = await this.$http.get('/other/getone',{params:{name:'banner'}});
        if(res.data.data==1){
          this.tableData = res.data.result.array;
        }
      } catch (error) {
          console.log(error)
      }
    },
    async getData(){
      try {
        let params = {title: this.title, isMe: false,deleted:false, page: this.page, size: this.size};
        let result = await this.$http.post("/article/getbytitle", params);
        this.total = result.data.result.total;
        this.accountData = result.data.result.result;
      } catch (error) {
        console.log(error)
      }
    },
  }
};
</script>